<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>flex</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        
        ul {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style: none;
        }
        
        .flex-container {
            display: flex;
            -webkit-flex-frow: row wrap;
            flex-flow: row wrap;
            justify-content: space-between;
            /* 判断在主轴上的排列方式 flex-start | flex-end | center | space-between | space-around;*/
            align-items: center;
            /* 侧轴或者叫交叉轴上面的排列方式 flex-start | flex-end | center | baseline | stretch;*/
            padding: 18px;
        }
        
        .flex-item {
            background: orange;
            width: 150px;
            border: 1px solid #f00;
            color: white;
            font-weight: bold;
            font-size: 3em;
            text-align: center;
            -webkit-order: 0;
            order: 0;
            margin-bottom: 15px;
        }
        
        .item1 {
            height: 120px;
            line-height: 120px;
        }
        
        .item2 {
            height: 100px;
            line-height: 100px;
        }
        
        .item3 {
            height: 40px;
            line-height: 40px;
        }
        
        .item4 {
            height: 200px;
            line-height: 200px;
            border-color: #00f;
        }
        
        @media all and (max-width: 643px) {
            .flex-container {
                justify-content: space-around;
                /* 均匀分布 */
                align-items: flex-start;
            }
            .item4 {
                -webkit-order: 0;
                order: 0;
            }
            .item2,
            .item3 {
                -webkit-order: 1;
                order: 1;
            }
            .item1 {
                -webkit-order: 2;
                order: 2;
                justify-content: flex-start;
            }
        }
    </style>
</head>

<body>
    <ul class="flex-container">
        <li class="flex-item item1">1</li>
        <li class="flex-item item2">2</li>
        <li class="flex-item item3">3</li>
        <li class="flex-item item4">4</li>
    </ul>
</body>

</html>